<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>年月日联动下拉列</title>
    <script>
        function loadDate() {
            // 当前年份
            let currentYear = new Date().getFullYear();
            // 加载年份
            let year = document.getElementById("year");
            for(let i = currentYear - 30; i <= currentYear; i++){
                year[year.length] = new Option(i+"年",i);
            }
            // 加载月份
            let month = document.getElementById("month");
            for(let i = 1; i<= 12; i++){
                month[month.length] = new Option(i+"月",i);
            }
        }

        function loadDay(){
            // 获取当前所选择的年份与月份
            let year = document.getElementById("year").value;
            let month = document.getElementById("month").value;

            // 天数下拉列节点
            let day = document.getElementById("day");

            // 清除原有的加载结果,保留一个初始选项
            day.length = 1;

            // 当年份或者月份没有选择对应有效数据时,不需要加载天数
            if(year == -1 || month == -1){
                return;
            }
            // 当年份与月份均选择了有效的数据,则加载对应的天数

            // 获取year年,month月一共有多少天
            let countDay = new Date(year,month,0).getDate();

            // 加载天数
            for(let i = 1;i <= countDay; i++){
                day[day.length] = new Option(i+"日",i);
            }
        }
    </script>
</head>
<!--
    onload:页面加载事件
-->
<body onload="loadDate()">
<!--
    1.当页面加载之后,加载年份与月份的下拉列选项
    要求:
        年份为当前年份(包含)的前三十年
        月份为1-12月
    2.当用户选择了有效的年份与月份之后
        根据所选择的年份与月份生成对应的天数
-->
<select id="year" onchange="loadDay()">
    <option value="-1">--年--</option>
</select>
<select id="month" onchange="loadDay()">
    <option value="-1">--月--</option>
</select>
<select id="day">
    <option value="-1">--日--</option>
</select>
</body>
</html>